<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li id="AA" class="box clearFix">1</li>
    <li name="con" class="content box">2</li>
    <li name="BB">3</li>
    <li id="AA">4</li>
    <li class="clearFix" name="con">5</li>
    <li myli="six">6</li>
    <li name="BB" id="AA">7</li>
    <li class="  clearFix">8</li>
    <li myli="six">9</li>
    <li myli="six" class="box">10</li>
  </ul>

  <script>
    /*
     * 实现一个 $attr(name,value)遍历
     * 属性位name
     * 值为value的元素集合
     * 
     */
    window.onload = function () {
      function $attr(name, value) {
        let art = [],
          elements = document.getElementsByTagName('*')

        Array.from(elements).forEach(item => {
          let itemValue = item.getAttribute(name)
          if (name === 'class') {
            let reg = new RegExp(`\\b${value}\\b`)
            if (reg.test(itemValue)) {
              art.push(item)
            }
            return;
          }
          if (itemValue === value) {
            art.push(item)
          }
        })
        return art
      }

      console.log($attr('id', 'AA'))
    }
  </script>
</body>

</html>